<template>
  <div v-if="film" class="film-banner" :style="`background-image: url(${film.poster});`" @click="showFilmPoster">
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'

export default {
  name: 'FilmPoster',
  computed: {
    ...mapState('FilmModule', ['film'])
  },
  methods: {
    showFilmPoster () {
      ImagePreview({
        images: [this.film.poster],
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
div {
  height: 210px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
</style>
